<template lang="">
	<view class="link_box">
<!--        <image class='bg_image' src="@/static/ring/head_bg.png" mode="widthFix"></image>-->
		<view class="container">
<!--			<view class="ringImg">
				<image class="lightDot" v-show="showSyncProgress" src="@/static/ring/lightDot.png"></image>
				<image class="head_ring" src="@/static/ring/ring.png" mode="widthFix"></image>
			</view>-->
			<HeaderMain :pageLoading="pageLoading" @onSync="onSync" />
		</view>
	</view>
</template>

<script>
import HeaderMain from "./HeaderMain.vue";

export default {
	components: {
		HeaderMain,
	},
	data() {
		return {
            pageLoading: false,
			showSyncProgress: true,
		};
	},
	methods: {
		onSync() {
            this.$emit('onSync')
        },
	},
};
</script>

<style lang="scss" scoped>
.link_box {
	width: 100%;
	color: white;
	position: relative;

    .bg_image {
        width: 100%;
    }

	.container {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;

		display: flex;
		justify-content: space-around;
		align-items: center;

		.ringImg {
			animation: float 2s ease-in-out infinite;
			position: relative;

            .head_ring {
                width: 176rpx;
            }



			.lightDot {
				position: absolute;
				width: 126rpx;
				height: 126rpx;
				z-index: 10;
				left: -32rpx;
				top: 16rpx;
				animation: blink 1.5s infinite;
			}

			@keyframes blink {
				0% {
					opacity: 1;
				}

				50% {
					opacity: 0.3;
				}

				100% {
					opacity: 1;
				}
			}
		}

		@keyframes float {
			0% {
				transform: translateX(-4rpx) translateY(0);
				/* 初始位置 */
			}

			50% {
				transform: translateX(-4rpx) translateY(-20rpx);
				/* 向上浮动 */
			}

			100% {
				transform: translateX(-4rpx) translateY(0);
				/* 回到初始位置 */
			}
		}
	}
}
</style>
